<template>
  <view class="cneter">
    <view class="user-info">
      <user-info @login-hnadle="goLoginHandle"></user-info>
    </view>
    <order :list="orderConfig.list">
      <template #title>
        <text style="font-weight: 700; font-size: 0.9rem">我的订单</text>
      </template>
    </order>
    <tool :list="toolConfig.list" @handle="toPagehandle">
      <template #title>
        <text style="font-weight: 700; font-size: 0.9rem">常用设置</text>
      </template>
    </tool>

    <!-- <tm-overlay
      v-model:show="showWin"
      :in-content="true"
      content-animation
      :overlay-click="false"
      @click="closeLoginWin"
    >
      <login v-model:overlay-click="showWin"></login>
    </tm-overlay> -->

    <tm-drawer
      ref="calendarView"
      v-model:show="showWin"
      :placement="'center'"
      :in-content="true"
      :z-index="999"
      :hide-header="true"
      :width="550"
      :height="650"
      :disabble-scroll="true"
    >
      <login></login>
    </tm-drawer>
  </view>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue'

import userInfo from './common/user-info/userInfo.vue'
import tool from './common/item/item.vue'
import type { ItemType } from './common/item/item.vue'
import order from './common/item/item.vue'

import myTarbar from '@/components/tarbar/src/index.vue'

import login from '@/pages/login/index.vue'

const emit = defineEmits([''])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})
//const { } = toRefs(props);

const overlayClick = ref(false)

const orderConfig = reactive({
  list: [
    {
      id: 1,
      title: '待付款',
      icon: 'icon-pay',
      color: '#ff9c7e',
    },
    {
      id: 2,
      title: '待发货',
      icon: 'icon-shop',
      color: '#febf0e',
    },
    {
      id: 3,
      title: '已发货',
      icon: 'icon-deliver',
      color: '#fdacf7',
    },
    {
      id: 4,
      title: '已完成',
      icon: 'icon-squarecheck',
      color: '#f86d6c',
    },
  ] as Array<ItemType>,
})

const toolConfig = reactive({
  list: [
    {
      id: 1,
      title: '修改资料',
      icon: 'icon-subtitle_unblock_light',
      color: '#ff9c7e',
    },
    {
      id: 2,
      title: '客服中心',
      icon: 'icon-service_light',
      color: '#febf0e',
    },
    {
      id: 3,
      title: '我的地址',
      icon: 'icon-location',
      color: '#fdacf7',
      path: '/pages/address/index',
    },
    {
      id: 4,
      title: '高校合伙人',
      icon: 'icon-friend_light',
      color: '#f86d6c',
    },
  ] as Array<ItemType>,
})

const toPagehandle = (e: ItemType) => {
  uni.navigateTo({
    url: e.path,
  })
}

const showWin = ref(false)
const goLoginHandle = () => {
  showWin.value = true
  console.log(55555555)
  uni.hideTabBar()
}

const closeLoginWin = () => {
  console.log(3333)
  showWin.value = true
  uni.showTabBar()
}

const { data } = toRefs(
  reactive({
    //定义数组和对象
    data: '',
  })
)
</script>
<style lang="scss" scoped>
.cneter {
  width: 100%;

  .user-info {
    background-color: #fff;
    padding-bottom: 20rpx;
  }
}

.login-button {
  width: 100vw;
  box-sizing: border-box;
  padding: 0 100rpx;
  margin-top: 50rpx;
}

.order {
  background-color: #fff;
  margin-top: 20rpx;
}
</style>
